<template>
  <div class="box">
    <div class="left"
    :style="{
      'background':'url('+dazhe.goods[0].img+')' ,
      'backgroundSize':'100% 100%'     
      }"
    >
      <p class="headline">{{ dazhe.goods[0].name }}</p>
      <p class="tedian">{{ dazhe.goods[0].maidian }}</p>
    </div>
    <div class="right">
      <div class="top"
      :style="{
      'background':'url('+dazhe.goods[1].img+')' ,
      'backgroundSize':'100% 100%'     
      }"
      >
        <p class="headline">{{ dazhe.goods[1].name }}</p>
        <p class="tedian">{{ dazhe.goods[1].maidian }}</p>
      </div>
      <div class="bottom"
      :style="{
      'background':'url('+dazhe.goods[2].img+')' ,
      'backgroundSize':'100% 100%'     
      }"
      >
        <p class="headline">{{ dazhe.goods[2].name }}</p>
        <p class="tedian">{{ dazhe.goods[2].maidian }}</p>
      </div>
    </div>
  </div>
</template>

<script>
//chuang
export default {
  name: "RecommendDian",
  props:['dazhe'],
  data(){
    return{
      back:""
    }
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 1.66rem;
  padding: 0 0.1rem;
  display: flex;
  margin-top: 0.1rem;
  box-sizing: border-box;
}
.left,
.right {
  width: 50%;
  height: 100%;
}
.left {
  padding-top: 0.08rem;
  padding-left: 0.08rem;
  box-sizing: border-box;
  font-size: 14px;
}
.tedian {
  font-size: 12px;
  color: rgb(243, 94, 94);
}
.top,
.bottom {
  padding-top: 0.05rem;
  font-size: 14px;
  width: 100%;
  height: 50%;
  box-sizing: border-box;
}

</style>